{css href="/static/index/css/style.css" /}
{css href="/static/index/css/jqy_example.css" /}
{layout name="layout"}
<div class="content">
    <!--    大图-->
    <div class="index_top_message"></div>
    {include file='public/nav'}
    <!--    nav-->
    <div class="container">
       <div class="heading"><img src="/static/index/image/mark.png" alt=""> <span>留言板</span> </div>
        <br> <br>


        <div class="container-fluid">
            <div class="page-header">
                <h3 class="text-center">输入留言</h3>
            </div>

            <div class="form-horizontal">
                <div class="form-group">
                    <label class="col-md-3 control-label" for="msgName">输入留言姓名</label>
                    <div class="col-md-6">
                        <input id="msgName" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label" for="msgEmail">输入留言邮箱</label>
                    <div class="col-md-6">
                        <input id="msgEmail" class="form-control" type="email">
                    </div>
                </div>
                <div class="form-group">
                    <label for="liuyan" class="col-md-3 control-label">输入留言内容</label>
                    <div class="col-md-6">
                    <textarea id="liuyan"
                              class='form-control'
                              name='test'
                              style="resize: none"
                              onkeyup='textAreaChange(this)' onkeydown='textAreaChange(this)' rows='5'></textarea>
                        <div class='text-right'>
                            <em style='color:red'>200</em>/<span>200</span>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-3 col-md-6">
                        <button type="button" class="btn btn-info pull-right" id="testConfirm">提交留言</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="container jqy">
            <ul id="file0">
                {volist name="message", id="msg"}
                <li>
                    <img src="/static/index/image/t{$msg.msg_id%10}.png" >
                    <h3>{$msg.msg_author} &nbsp;&nbsp;&nbsp; <span class="pull-right" style="color: grey; font-size: 10px; padding: 10px;">{$msg.msg_create_time|substr="0","16"}</span></h3>
                    <p>{$msg.msg_content}</p>
                </li>
                {/volist}
            </ul>
        </div>
    </div>


</div>
{include file="public/totop"}
<script type="text/javascript">
    //显示限制输入字符method
    function textAreaChange(obj){
        var $this = $(obj);
        var count_total = $this.next().children('span').text();
        var count_input = $this.next().children('em');
        var area_val = $this.val();
        if(area_val.len()>count_total){
            area_val = autoAddEllipsis(area_val,count_total);//根据字节截图内容
            $this.val(area_val);
            count_input.text(0);//显示可输入数
        }else{
            count_input.text(count_total - area_val.len());//显示可输入数
        }
    }
    //得到字符串的字节长度
    String.prototype.len = function(){
        return this.replace(/[^\x00-\xff]/g, "xx").length;
    };
    /*
     * 处理过长的字符串，截取并添加省略号
     * 注：半角长度为1，全角长度为2
     * pStr:字符串
     * pLen:截取长度
     * return: 截取后的字符串
     */
    function autoAddEllipsis(pStr, pLen) {
        var _ret = cutString(pStr, pLen);
        var _cutFlag = _ret.cutflag;
        var _cutStringn = _ret.cutstring;
        return _cutStringn;
    }
    /*
     * 取得指定长度的字符串
     * 注：半角长度为1，全角长度为2
     * pStr:字符串
     * pLen:截取长度
     * return: 截取后的字符串
     */
    function cutString(pStr, pLen) {
        // 原字符串长度
        var _strLen = pStr.length;
        var _tmpCode;
        var _cutString;
        // 默认情况下，返回的字符串是原字符串的一部分
        var _cutFlag = "1";
        var _lenCount = 0;
        var _ret = false;
        if (_strLen <= pLen/2){_cutString = pStr;_ret = true;}
        if (!_ret){
            for (var i = 0; i < _strLen ; i++ ){
                if (isFull(pStr.charAt(i))){_lenCount += 2;}
                else {_lenCount += 1;}
                if (_lenCount > pLen){_cutString = pStr.substring(0, i);_ret = true;break;}
                else if(_lenCount == pLen){_cutString = pStr.substring(0, i + 1);_ret = true;break;}
            }
        }
        if (!_ret){_cutString = pStr;_ret = true;}
        if (_cutString.length == _strLen){_cutFlag = "0";}
        return {"cutstring":_cutString, "cutflag":_cutFlag};
    }
    /*
     * 判断是否为全角
     *
     * pChar:长度为1的字符串
     * return: true:全角
     *         false:半角
     */
    function isFull (pChar){
        if((pChar.charCodeAt(0) > 128)){return true;}
        else{return false;}
    }
</script>
<script>
    /*发送留言Ajax*/
    $(function () {
        $("#testConfirm").click(function () {
            let msg_author =  document.getElementById("msgName").value
            let msg_author_email =  document.getElementById("msgEmail").value
            let msg_content =  $("#liuyan").val();
            if(msg_author === '' || msg_author_email === '' || msg_content === ''){
                alert("请填写完整信息")
            }else{
                $.ajax({
                    type: "POST",
                    url: "/pushMessage",
                    dataType: "JSON",
                    data: {
                        'msg_author'        : msg_author,
                        'msg_author_email'  : msg_author_email,
                        'msg_content'       : msg_content
                    },
                    success:function (data) {
                        if(data === 1){
                            document.getElementById("msgName").value = ""
                            document.getElementById("msgEmail").value = ""
                            $("#liuyan").val("")
                            alert("已经提交留言，等待审核通过")
                        }else{
                            alert("留言失败，请稍后再试")
                        }
                        console.log(data);
                    },
                    error:function (error) {
                        alert("留言失败，请稍后再试")
                        console.log(error);
                    }
                })
            }

        })
    })
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br>

